<template>
  <div>
    <TopFilter :list="topFilterList" :cols="3" labelWidth="100" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      ref="table"
      columnsRef="inOutReport11"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
      :isSelectColumn="false"
      :onSyncTableData="tableHandle"
      :isExportExcel="true"
      exportFileName="配件到货确认查询.xlsx"
    >
      <!-- <template slot="controls" slot-scope="props">
        <el-button size="small" type="primary" icon="el-icon-daochu" :disabled="exportBtn" @click="handleExport">导出</el-button>
      </template> -->
    </FilterTable>
  </div>
</template>

<script>
/*
 *
 * 配件到货确认查询.
 */

import { authority } from '@/utils/authMixin';
import { arrivalConfirmationInfo } from '@/api/part/report/arrivalConfirmation';
import moment from 'moment';
import { dictionary } from '@/utils/dictMixin';
export default {
  name: 'inOutReport',
  components: {},
  mixins: [authority, dictionary],
  data() {
    return {
      visible: false,
      topFilterList: this.createTopFilters(),
      fetchApi: arrivalConfirmationInfo,
      columns: this.createTableColumns(),
      fetchParams: { xhrAbort: true },
      dialogTitle: '', // 子组件标题
      handleType: '', // 向子页面传的类型
      formData: {}, // 向子组件传数据的数组
      tableData: [] // 表单数据
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    statusItemList() {
      return [
        { text: '新建', value: 'N' },
        { text: '删除', value: 'D' },
        { text: '确认', value: 'C' },
        { text: '审核', value: 'P' },
        { text: '作废', value: 'Q' }
      ]; // 状态字典
    },
    createTopFilters() {
      return [
        {
          type: 'INPUT',
          label: '发货单号',
          fieldName: 'VBELN',
          rules: [{ required: false, message: '请输发货单号', trigger: 'blur' }]
        },

        {
          type: 'RANGE_DATE',
          label: '发货单日期',
          dateType: 'daterange',
          initialValue: [
            moment()
              .startOf('month')
              .format('YYYY-MM-DD'),
            moment().format('YYYY-MM-DD')
          ],
          style: { minWidth: '180px' },
          fieldName: 'FHRQ_START|FHRQ_END'
        },
        {
          type: 'RANGE_DATE',
          label: '确认日期',
          dateType: 'daterange',
          initialValue: [
            moment()
              .startOf('month')
              .format('YYYY-MM-DD'),
            moment().format('YYYY-MM-DD')
          ],
          style: { minWidth: '120px' },
          fieldName: 'ERDAT_START|ERDAT_END'
        },
        {
          type: 'SELECT',
          label: '发货单状态',
          fieldName: 'STATUS',
          itemList: [
            { text: '全部', value: '' },
            { text: '新建', value: 'N' },
            { text: '删除', value: 'D' },
            { text: '确认', value: 'C' },
            { text: '审核', value: 'P' },
            { text: '作废', value: 'Q' }
          ]
        },
        {
          type: 'RANGE_DATE',
          label: '订单申请日期',
          dateType: 'daterange',
          initialValue: [
            moment()
              .startOf('month')
              .format('YYYY-MM-DD'),
            moment().format('YYYY-MM-DD')
          ],
          style: { minWidth: '180px' },
          fieldName: 'SPDAT_START|SPDAT_END'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '发货单号',
          dataIndex: 'VBELN',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '经销商',
          dataIndex: 'KUNNR',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '状态',
          dataIndex: 'STATUS',
          // align: 'center',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.statusItemList(),
          dictItems: this.statusItemList(),
          render: params => {
            let statusName = '';
            switch (params.row.STATUS) {
              case 'N':
                statusName = '新建';
                break;
              case 'D':
                statusName = '删除';
                break;
              case 'C':
                statusName = '确认';
                break;
              case 'P':
                statusName = '审核';
                break;
              case 'Q':
                statusName = '作废';
                break;
            }
            return <span>{statusName}</span>;
          }
        },

        {
          title: '确认日期',
          dataIndex: 'ERDAT',
          align: 'center',
          sorter: true,
          filter: true,
          dateFormat: 'yyyy-MM-dd',
          filterType: 'input'
        },
        {
          title: '确认时间',
          dataIndex: 'ERZET',
          align: 'center',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '确认用户名',
          dataIndex: 'ERNAM',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '申请单号',
          dataIndex: 'VBELN_VA',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '申请日期',
          dataIndex: 'SPDAT',
          align: 'center',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '申请时间',
          dataIndex: 'SPTIM',
          align: 'center',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '申请类型',
          dataIndex: 'AUART',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '发货日期',
          dataIndex: 'FHRQ',
          align: 'center',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '发货时间',
          dataIndex: 'FHSJ',
          align: 'center',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '发货库',
          dataIndex: 'FHK',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '估算发货日期',
          dataIndex: 'GSRQ',
          align: 'center',
          sorter: true,
          dateFormat: 'yyyy-MM-dd',
          filter: true,
          filterType: 'input'
        },
        {
          title: '估算发货时间',
          dataIndex: 'GSSJ',
          align: 'center',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '目标时长',
          dataIndex: 'MBSC',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '实际时长',
          dataIndex: 'SJSC',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '是否符合目标时长',
          dataIndex: 'MBBS',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    // 搜索
    changeHandle(val) {
      this.fetchParams.xhrAbort = true;
      this.fetchParams = Object.assign({}, { xhrAbort: false }, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },

    // table动态回调函数
    tableHandle(val) {
      this.tableData = val;
      console.log(this.tableData);
    },
    closeHandler(val, type) {
      this.visible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    }
  }
};
</script>

<style lang="less" scoped></style>
